<template>
    <div class="task" :class="{ 'task-active': isTop && !isMin }" @click="cancelMin">
        <div class="icon">
            <img :src="task.icon" alt="图标" />
        </div>
        <div class="title" v-text="task.title"></div>
        <div class="underline"></div>
    </div>
</template>

<script setup lang="ts">
import { useWindowStore } from '@/store/window';
import { reactive, toRefs, watch } from 'vue';

// 创建store对象
const windowStore = useWindowStore();

const props = defineProps({
    // 任务对象
    task: {
        type: Object,
        default: null,
    },
});

const data = reactive({
    // 是否已经置顶
    isTop: windowStore.isTop(props.task.id),
    // 是否已经最小化
    isMin: windowStore.isMin(props.task.id),
});
const { isTop, isMin } = toRefs(data);

// 监听store中zIndexArray的改变
watch(
    windowStore.zIndexArray,
    () => {
        data.isTop = windowStore.isTop(props.task.id);
    },
    {
        deep: true,
    },
);

// 监听store中windowArray的改变
watch(
    windowStore.windowArray,
    () => {
        // 修改当前窗口的最小化状态
        data.isMin = windowStore.isMin(props.task.id);
    },
    {
        deep: true,
    },
);

// 取消最小化并置顶
const cancelMin = function () {
    windowStore.cancelMin(props.task.id);
    windowStore.goTop(props.task.id);
};
</script>

<style scoped lang="less">
.task {
    height: 40px;
    width: 120px;
    margin: 0 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    transition: all 100ms;

    .icon {
        height: 20px;
        width: 20px;
        margin-left: 10px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .title {
        margin-left: 10px;
        font-size: @dps-font-size-base;
        line-height: 40px;
        text-align: center;
        color: rgb(255, 255, 255);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .underline {
        height: 2px;
        width: 100px;
        position: absolute;
        left: 10px;
        bottom: 0;
        background-color: @dps-color-light-gray;
        transition: all 100ms;
    }
}

.task:hover {
    background-color: @dps-color-light-gray-15;

    .underline {
        width: 120px;
        left: 0;
    }
}

.task-active {
    background-color: @dps-color-light-gray-10;

    .underline {
        width: 120px;
        left: 0;
    }
}
</style>
